<template>
  <header class="header">
     <div class="header-back">
     <span class="iconfont">&#xe6a8;</span>
     </div>
     <div class="header-search">
       <span class="header-txt"><span class="iconfont">&#xe643;</span>输入城市/景点/游玩主题</span>
     </div>
     <router-link class="header-city" to="city" tag="div">
       <span class="header-change">
         {{ this.$store.state.curCity }}
       <span class="iconfont">&#xe6aa;</span>
       </span>
     </router-link>
   </header>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped="scoped">
  .header
    background #00bcd4
    width 100%
    height 0.88rem
    display flex
    justify-content center
    align-items center
   .header-back
      width 0.88rem
      padding 0 0.1rem
      color white
    .header-search
      flex 1
      background #FFFFFF
      border-radius: 0.06rem
      margin: .14rem 0
      line-height: 0.6rem
      height: .6rem
      .header-txt
        color: #e4e7ea
        margin-left: 0.3rem
    .header-city
      padding 0 0.22rem
      .header-change .city-ico
        font-size: 0.2rem
     .header-change
          line-height: 0.88rem
          color: #fff
</style>
